Thank you for advance. I changed the class name in JavaScript, but it doesn't change. [html]
<button id={{ product.id }} data-product={{ product.id }} data-action='add' class="btn btn-outline-secondary add-btn store-cart"> button</button>
[javascript]
var storeBtns = document.getElementsByClassName('store-cart')
for (i = 0; i < storeBtns.length; i++) {
storeBtns[i].addEventListener('click', function(){
document.getElementById(this.dataset.product).class = 'btn-primary'})}
When I check (document.getElementById(this.dataset.product).class by adding alert to the bottom line, "btn-primary" appears, but this does not apply in the page. What should I do?
I also tried with classList.add , but it didn't work, so I was wondering if there is anything else to do, such as returning document .
Thank you.
classtList.add('class-name') should be what you need: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
That's assuming you want to append btn-primary to the classes already on the element.
for (i = 0; i < storeBtns.length; i++) {
storeBtns[i].addEventListener('click', function(){
document.getElementById(this.dataset.product).classList.add('btn-primary');
});
}